<template>
    <l-layout class="l-tab-page" :left="240" >
        <template #left > 
            <l-panel :title="$t('公司信息')" style="padding-right:0;" >
                <el-tree :data="lr_companyTree" default-expand-all :expand-on-click-node="false"  @node-click="handleCompanyClick">
                    <span class="lr-tree-node"  slot-scope="{ node}">
                        <i class="fa fa-sitemap"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-layout>
            <template #left >
                <l-panel :title="$t('部门信息')" style="padding-left:0;padding-right:0;" >
                    <el-tree :data="departmentsTree" default-expand-all :expand-on-click-node="false"  @node-click="handleDepartmentClick">
                        <span class="lr-tree-node"  slot-scope="{ node}">
                            <i class="fa fa-sitemap"></i>
                            {{ $t(node.label) }}
                        </span>
                    </el-tree>
                </l-panel>
            </template>
            <l-select-panel
                v-model="value"
                ref="selectPanel"
                valueKey="f_UserId"
                model="client"
                :multiple="multiple"
                :columns="columns"
                :loadSelectTable="loadSelectTable"
                :selectedData.sync="selectedData"

                @change="handleChange"

                style="padding:8px;padding-left:0;"
            >
                <template v-slot:f_CompanyId="scope" >
                    {{(lr_companyList.find(t=>t.f_CompanyId == scope.row.f_CompanyId) || {}).f_FullName || ''}}
                </template>
                <template v-slot:f_DepartmentId="scope" >
                    {{lr_departmentName(lr_departments[scope.row.f_CompanyId] || [],scope.row.f_DepartmentId)}}
                </template>
            </l-select-panel>
        </l-layout>
    </l-layout>
</template>
<script>
export default {
    name:'l-user-select-panel',
    props:{
        multiple:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            value:'',
            selectedData:[],

            companyId:'',
            departmentId:'',
            departmentLoading:false,

            columns: [
                {label:'姓名',prop:'f_RealName',minWidth:'110'},
                {label:'账号',prop:'f_Account',width:'110'},
                {label:'公司',prop:'f_CompanyId',minWidth:'120'},
                {label:'部门',prop:'f_DepartmentId',minWidth:'88'},
            ]
        };
    },
    computed:{
        departmentsTree(){
            return this.lr_departmentTree(this.lr_departments[this.companyId])
        }
    },
    mounted () {
        this.lr_loadCompanys()
        this.tableLoadData()
    },
    methods:{
        handleCompanyClick(node) {
            this.companyId = node.value
            this.departmentId = ''
            this.lr_loadDepartments(this.companyId)
            this.tableLoadData()
        },
        handleDepartmentClick(node){
            this.departmentId = node.value;
            this.tableLoadData();
        },
        tableLoadData(){
            this.$refs.selectPanel.init();
        },
        async loadSelectTable(postData){
            postData.sidx = 'F_CreateDate DESC'
            if(postData.showType == 1){
                postData.companyId = this.companyId
                postData.departmentId = this.departmentId
            }

            const data =await this.lr_getUserPage(postData)
            data.rows.forEach(item => {
                this.lr_loadDepartments(item.f_CompanyId)
            })
            return data
        },
        resetForm(){
            this.value = ''
            this.$refs.selectPanel.reset()
            this.tableLoadData()
        },
        getForm(){
            return this.$deepClone(this.selectedData).map(t=>{ return {...t,name:`${this.lr_departmentName(this.lr_departments[t.f_CompanyId] || [],t.f_DepartmentId)}-${t.f_RealName}`} });
        },
        handleChange(value){
            if(value){
                this.$emit('change',this.selectedData[0])
            }
            else{
                this.$emit('change',null)
            }
        }
    }
}
</script>